<template>
  <!--  :accept="fileType"   -->
  <el-upload
    class="upload-ele"
    ref="upload"
    :data="{
      token: $cookies.get('token') || $store.state.user.token,
      lang: $i18n.locale
    }"
    :headers="{ toekn: $store.state.user.token }"
    :action="uploadConfig.uploadurl"
    :show-file-list="false"
    :on-error="handleFileError"
    :on-success="handleFileSuccess"
    :before-upload="beforeFileUpload"
  >
    <el-button v-if="showType == 'btn'" class="upload-btn">{{ text }}</el-button>
    <div v-if="showType == 'box'" class="upload-box flexbox flex-tb flex justify-center items-center">
      <img
        loading="lazy"
        class="icon"
        src="https://cd.sealmg.com/assets/img/upload-icon.png"
        alt="https://cd.sealmg.com/assets/img/upload-icon.png"
        srcset=""
      />
      <div class="text">{{ $t('formBtn.uploadText') }}</div>
    </div>
    <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
  </el-upload>
</template>
<script>
  export default {
    props: {
      showType: {
        type: String,
        default: 'btn'
      },
      btnText: {
        type: String,
        default: ''
      },
      fileType: {
        type: String,
        default: '*'
      }
    },
    data() {
      return {
        img: '',
        text: this.btnText || this.$t('formBtn.uploadText')
      }
    },
    watch: {
      // 'btnText':{
      //   handler (newVal) {
      //     this.text=newVal
      //   },
      //   deep:true,
      //   immated:true
      // }
    },
    computed: {
      uploadConfig() {
        return (
          this.$store.state.initData.initData.uploaddata || {
            uploadurl: process.env.apiStaticURL
          }
        )
      }
    },
    created() {
      // {
      //   "uploadurl": "https:\/\/api.sealmg.com\/addons\/aliyunoss\/index\/upload.html",
      //   "cdnurl": "http:\/\/seaimgs.oss-cn-chengdu.aliyuncs.com",
      //   "savekey": "\/uploads\/{year}{mon}{day}\/{filemd5}{.suffix}",
      //   "maxsize": "10mb",
      //   "mimetype": "jpg,png,bmp,jpeg,gif,webp,zip,rar,wav,mp4,mp3,webm",
      //   "multiple": false,
      //   "chunking": false,
      //   "chunksize": 2097152,
      //   "fullmode": false,
      //   "thumbstyle": "",
      //   "bucket": "seaimgs",
      //   "multipart": [],
      //   "storage": "aliyunoss",
      //   "uploadmode": "server"
      // }
    },
    methods: {
      triggerUpload() {
        this.$refs.upload.submit()
      },
      beforeFileUpload(file) {
        //const isJPG = file.type === 'image/jpeg';//mimetype "jpg,png,bmp,jpeg,gif,webp,zip,rar,wav,mp4,mp3,webm"
        const isLt10M = file.size / 1024 / 1024 < 10 //this.uploadConfig.maxsize;
        const list = file && file.name ? file.name.split('.') : []
        const fileType = list.length ? list[list.length - 1] : ''
        if (fileType && this.uploadConfig.mimetype && this.uploadConfig.mimetype.indexOf(fileType) == -1) {
          this.$message.warning(this.$t('formRule.fileTypeError'))
          return false
        }
        if (!isLt10M) {
          this.$message.warning(this.$t('formRule.fileSizeError'))
          return false
        }
        return true // isJPG && isLt2M;
      },
      handleFileSuccess(res, file) {
        if (res.data && res.data.url) {
          this.$emit('uploadSuccess', this.$globalFn.imgPrefixUrl(res.data.url))
        }
      },
      handleFileError(res, file) {
        this.$message.error(this.$t('formRule.fileUploadError'))
      }
    }
  }
</script>
<style lang="less" scoped>
  .upload-ele {
    .upload-btn {
      padding: 0 24px;
      width: auto;
      height: 38px;
      line-height: 38px;
      text-align: center;
      background: @color-ff;
      border-radius: 19px;
      font-size: 14px;
      color: @font-color-26;
      border: @border-1-e5;
    }
    .upload-box {
      width: 88px;
      height: 88px;
      background: @color-f7;
      border-radius: 8px;
      .text {
        font-weight: 500;
        font-size: 12px;
        color: #b3b3b3;
      }
      .icon {
        margin-top: 5px;
        width: 18px;
        height: 18px;
      }
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .upload-ele {
      .upload-btn {
        padding: 0 16px;
        width: auto;
        height: 32px;
        line-height: 32px;
        background: @color-ff;
        font-weight: 400;
        font-size: 14px;
        color: @font-color-26;
        border-radius: 19px;
        border: @border-1-e5;
      }
    }
  }
  @media screen and (max-width: 767px) {
    .upload-ele {
      .upload-btn {
        padding: 0 16px;
        width: auto;
        height: 32px;
        line-height: 32px;
        background: @color-ff;
        font-weight: 400;
        font-size: 14px;
        color: @font-color-26;
        border-radius: 19px;
        border: @border-1-e5;
      }
    }
  }
</style>
